import ReactDOM from 'react-dom'
import React, { Component, createRef } from 'react'

class App extends Component {

  // 表单元素自己控制它的值，不受state数据控制。非受控组件
  // 使用ref获取元素，也可以获取组件
  // 1. 创建ref对象
  // 2. 通过ref属性绑定这个对象，给你需要获取的元素绑定
  // 3. 通过ref对象拿到绑定的元素
  ref = createRef()


  getDom = () => {
    console.log(this.ref.current)  // 目标元素
    console.log(this.ref.current.value)   // 获取数据
  }

  render() {
    return (
      <div>
        <div>
          <input ref={this.ref} type="text" placeholder='输入手机号' />
          <button onClick={this.getDom}>获取元素</button>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))
